define('pc/js/mod/home/vue-home-fans-fans', [
    'pc/js/mod/vue-loading',
    'pc/js/mod/vue-empty',
    'components/VuePage/vue-page',
    'utils/helpers',
    'utils/fetchEnhancer'], (VueLoading, VueEmpty, VuePage, helpers, fetch) => {

Vue.prototype.helpers = helpers;

const Fans = {
    // type = fans | follows
    props: ['strUid', 'type'],
    components: {
        'vue-loading': VueLoading,
        'vue-empty': VueEmpty,
        'vue-page': VuePage
    },
    data: function() {
        return {
            totalRecords: 0,
            pageSize: 12,
            list: null,
            isLoading: true,
            isEmpty: false
        };
    },
    methods: {
        fetchList: function(page) {
            var _self = this;

            fetch('/api/fans/list?type='+ this.type +'&page='+ page +'&uid=' + globalStrUid).then(function(json){
                if(0 === json.status) {
                    _self.renderList(json.data.data);
                    _self.renderPage(json.data.total, json.data.page_size);
                }
            });
        },
        renderList: function(list) {
            this.isLoading = false;

            if(!list || !list.length) {
                this.isEmpty = true;
                return;
            }

            this.list = list;
        },
        renderPage: function(total, pageSize) {
            this.totalRecords = total;
            this.pageSize = pageSize;
        },
        changePage: function(currentPage) {
            this.fetchList(currentPage);
        }
    },
    mounted: function() {
        this.fetchList(1);
    },
    watch: {
        $route: function(now, old) {
            this.fetchList(1);
        }
    },
    template:
`
<div class="home-content-right">
    <div class="home-content-right-title">{{ 'fans' === type ? 'TA 的粉丝' : 'TA 的关注' }}</div>
    <div class="home-content-right-list" style="position: relative;">
        <vue-loading v-if="isLoading"></vue-loading>
        <vue-empty v-if="isEmpty"></vue-empty>

        <div v-if="null !== list">
        <div class="home-fansitem" v-for="item in list">
            <a target="_blank" v-bind:href="helpers.U('home', {uid: item.str_uid})">
                <img v-bind:src="helpers.getAvatar(item.user_info.avatar)" />
            </a>
            <a target="_blank" v-bind:href="helpers.U('home', {uid: item.str_uid})">{{ item.user_info.user_name }}</a>
        </div>
        </div>

    </div>
    <vue-page v-bind:onChange="changePage" v-bind:totalRecords="totalRecords" v-bind:pageSize="pageSize"></vue-page>
</div>
`
};

return Fans;

});
